<template>
  <view class="container">
    <text class="title">加法运算</text>
    
    <view class="calculator-container">

      <input type="text" v-model.number="num1" placeholder="请输入第一个数字" />
      <input type="text" v-model.number="num2" placeholder="请输入第二个数字" />

      <demo-component
        :num1="num1"
        :num2="num2"
        :operator="operator"
        @calculateResult="handleCalculateResult"
      ></demo-component>
      
      <view class="result" v-if="result !== null">
        计算结果: {{ result }}
      </view>
    </view>
    
    <view class="nav-buttons">
      <button @click="linkTo('/pages/multiply/multiply')">乘法页面</button>
      <button @click="linkTo('/pages/division/division')">除法页面</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';


import DemoComponent from '@/components/demo-component.vue';


const num1 = ref(0);
const num2 = ref(0);
const operator = ref('+');
const result = ref(null);


const linkTo = (url) => {
    uni.navigateTo({url})
}


const handleCalculateResult = (data) => {
  result.value = data;
};
</script>

<style>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 60rpx;
  margin-bottom: 30rpx;
  text-align: center;
}

.calculator-container {
  width: 100%;
  max-width: 600rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

input {
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
}

.operator-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.operator-buttons button {
  width: 22%;
  padding: 15rpx;
}

.operator-buttons button.active {
  background-color: #007aff;
  color: white;
}

.result {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 5rpx;
  text-align: center;
  font-size: 32rpx;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20rpx;
  width: 100%;
}

.nav-buttons button {
  padding: 20rpx 40rpx;
  background-color: #007aff;
  color: white;
  border-radius: 5rpx;
}
</style>
